<template>
    <div>
        <h6>表单</h6>
        <template v-for="item in templateData" :key="item.id">
            <slot v-if="item.tag === 'custom'" :name="item.key" :data="item"></slot>
            <component v-else-if="item.tag === 'container'" :config="item" :is="layouts[item.tag]"></component>
            <Label v-else>
                <component :config="item" :is="layouts[item.tag]"></component>
            </Label>
        </template>

    </div>
</template>

<script setup>
import Label from './components/label/index.vue'
import { markRaw, ref, defineAsyncComponent } from 'vue'


const props = defineProps({
    templateData: {
        type: Array,
        default: () => []
    }
})
let layouts = ref({})

props.templateData.forEach(item => {
    if (item.tag !== 'custom') {
        console.log(item.tag)
        layouts.value[item.tag] = markRaw(defineAsyncComponent(() =>
            import(`./components/${item.tag}/index.vue`)
        ))
    }
})
</script>

<style lang='less' scoped></style>